<template>
  <div class="home">
    <!-- 纯数字统计 -->
    <numberItem :top-loading="topLoading" :tl1-list="tl1List" />
    <!-- 折线图 -->
    <div class="tl2">
      <div class="top">
        <el-tabs v-model="activeName" style="line-height: 60px" size="large" @tab-click="handleTabClick">
          <el-tab-pane label="本周" name="first" />
          <el-tab-pane label="本月" name="second" />
          <el-tab-pane label="全年" name="third" />
        </el-tabs>
        <el-date-picker
          v-model="searchOption.date"
          class="search"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeTime"
        />
      </div>
      <div class="charts flexwrap" style="display: flex">
        <div v-loading="loading1" class="v-style">
          <p class="v-title">销售趋势</p>
          <ve-line
            :data="chartData"
            height="360px"
            width="100%"
            :legend-visible="false"
            :settings="chartSettings"
          />
        </div>
        <div class="v-ranking">
          <p class="v-title" style="margin-bottom: 40px">门店销售额排名</p>
          <rankItem :data-list="rankList" />
        </div>
      </div>
      <div v-loading="loading1" class="list">
        <simpleTable
          header-bg-color="#f5f7fa"
          :is-show-serial-number="false"
          :is-show-operation="false"
          :table-data="chartData.rows"
          :props="callProps"
        />
      </div>
    </div>
    <!-- 条形图 -->
    <div class="tl3">
      <p class="tl3-title">2021年销售排名前5的分店：</p>
      <ve-bar
        v-if="chartData1.rows"
        :data="chartData1"
        :legend-visible="false"
        :settings="chartSettings1"
        :extend="extend1"
        :grid="{ containLabel: true, right: 150 }"
      />
    </div>
    <!-- 饼图 -->
    <div class="tl4 flex flexwrap">
      <div class="left">
        <p class="tl3-title">线上门店销售占比：</p>
        <ve-pie
          v-if="chartData4.rows"
          :legend-visible="true"
          :data="chartData4"
          :extend="extend"
          :settings="chartSettings3"
        />
      </div>
      <div class="right">
        <p class="tl3-title">线下门店销售占比：</p>
        <ve-ring
          v-if="chartData4.rows"
          :legend-visible="true"
          :data="chartData4"
          :extend="extend"
          :settings="chartSettings4"
        />
      </div>
    </div>
    <!-- 寄语和进度记录 -->
    <div class="tl5">
      <div class="time-view">
        <p class="tl3-title">进度记录：</p>
        <div style="margin-left:20px">
          <a-timeline>
            <a-timeline-item v-for="(item,index) in timelineList" :key="'aksjsj'+index" :color="item.color">
              <p v-for="itm in item.list" :key="itm.txt">{{ itm.txt }}</p>
            </a-timeline-item>
          </a-timeline>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import numberItem from './../../components/numberItem'
import rankItem from './../../components/rankItem'
import simpleTable from './../../components/simpleTable'
import chickenSoup from './../../mock/chickenSoup'
export default {
  name: 'Home',
  components: {
    numberItem,
    rankItem,
    simpleTable
  },
  data() {
    this.chartSettings = {
      labelMap: {
        totalPrice: '净销售额' // 点击柱子时显示的文字
      },
      dimension: ['dateTime'], // 维度别名
      metrics: ['totalPrice'] // 指标别名
    }
    this.chartSettings1 = {
      labelMap: {
        percentage: '实收保费'
      },
      // xAxisType:["percent"],
      dimension: ['talkDuration'], // 维度
      metrics: ['percentage'], // 指标
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: 'right',
            formatter: (params) => {
              return (
                this.chartData1.rows[params.dataIndex].percentage +
                '元 / ' +
                this.chartData1.rows[params.dataIndex].order +
                '个订单'
              )
            }
          }
        }
      }
    }
    this.chartSettings3 = {
      dimension: ['key'], // 维度-横坐标
      metrics: ['value'], // 指标-纵坐标
      // radius: 75,
      offsetY: 130
    }
    this.extend = {
      legend: {
        bottom: 40,
        itemGap: 20,
        icon: 'circle' // 图例的标识改成圆点
      },
      series: {
        label: {
          normal: {
            show: false
          }
        }
      }
    }
    this.chartSettings4 = {
      dimension: ['key'], // 维度-横坐标
      metrics: ['value'], // 指标-纵坐标
      // radius: ["60px", "100px"],  //圆环内径和外径，可以用px单位
      radius: ['30%', '52%'], // 之所以注释掉换成百分比，是为了做屏幕适配，使图表在大屏小屏电脑上能自动变大和变小
      offsetY: 130
    }
    this.extend1 = {
      color: ['rgba(45, 103, 235, 0.6)']
    }
    return {
      activeName: 'first',
      searchOption: {
        date: ''
      },
      topLoading: true,
      tl1List: [],
      loading1: true,
      chartData: {
        columns: ['dateTime', 'totalPrice'],
        rows: []
      },
      chartData1: {
        rows: []
      },
      chartData4: {
        rows: []
      },
      rankList: [
        {
          key: '拱墅区1号分店',
          value: 2200.34
        },
        {
          key: '拱墅区2号分店',
          value: 12023.34
        },
        {
          key: '拱墅区3号分店',
          value: 200.34
        },
        {
          key: '拱墅区4号分店',
          value: 100.34
        },
        {
          key: '拱墅区5号分店',
          value: 50.34
        },
        {
          key: '拱墅区6号分店',
          value: 30.34
        },
        {
          key: '拱墅区7号分店',
          value: 10.34
        }
      ],
      callProps: [
        {
          prop: 'dateTime',
          label: '日期'
        },
        {
          prop: 'clickNum',
          label: '点击量',
          sort: true // 是否可以筛选
        },
        {
          prop: 'peopleNum',
          label: '访问人数'
        },
        {
          prop: 'totalPrice',
          label: '净收入'
        },
        {
          prop: 'returnNum',
          label: '退款数'
        },
        {
          prop: 'returnPrice',
          label: '退款金额'
        }
      ],
      timelineList: [
        { list: [
          { txt: '完成退出登录、刷新功能' },
          { txt: '只提供首页模拟接口进行演示' },
          { txt: '封装网络请求框架，使用mock生成本地接口数据' }
        ], color: 'red' },
        { list: [
          { txt: '基本功能已经完善，纯静态模板，接口需要自己接哦' },
          { txt: '每日一句心灵鸡汤' }
        ], color: 'gray' },
        { list: [
          { txt: '模拟权限路由配置' },
          { txt: '完善顶部路由回溯组件' }
        ], color: 'gray' },
        { list: [
          { txt: '权限管理、权限组、权限菜单的页面搭建，以及文档说明' },
          { txt: '错误页、个人中心页面搭建' }
        ], color: 'gray' },
        { list: [
          { txt: '提前上传未完成作品到gitee，以及简书的文档' },
          { txt: '产品列表、详情页、添加弹窗的搭建' }
        ], color: 'gray' },
        { list: [
          { txt: '首页统计图表设计和搭建' },
          { txt: '项目主体框架和收缩动画' }
        ], color: 'gray' },
        { list: [
          { txt: '简书同步记录管理后台从无到有的搭建过程' },
          { txt: '创建vue项目，导入必要的依赖' }
        ], color: 'gray' }
      ],
      chickenList: chickenSoup
    }
  },
  computed: {

  },
  watch: {
    '$store.state.setting.refresh': {
      handler: function(newVal, oldVal) {
        if (newVal) {
          this.getData()
        }
      }
    }
  },
  created() {},
  mounted() {
    this.getData()
    if (!this.$store.state.setting.showTips) return
    const index = Math.floor(Math.random() * this.chickenList.length)
    const item = this.chickenList[index]
    this.$notification.open({
      message: item.content,
      description: `——《 ${item.from} 》`,
      icon: <a-icon type='smile' style='color: #F7BA2A'/>,
      onClick: () => {}
    })
    this.$store.commit('setting/changeShowTips', false)
  },
  methods: {
    getData() {
      this.getTotalCount()
      this.getTrendData()
      this.getRankData()
      this.getPieData()
    },
    changeTime() {
      this.getTrendData(this.activeName)
    },
    handleTabClick(tab) {
      this.getTrendData(tab.name)
    },
    getTotalCount() {
      this.topLoading = true
      this.$api.get('/data/countData', {}, r => {
        console.log('打印统计数据----', r)
        setTimeout(() => {
          this.topLoading = false
        }, 300)
        if (r.flag) {
          this.tl1List = r.data
        }
      })
    },
    getTrendData(value) {
      this.loading1 = true
      let dateArr = []
      if (this.searchOption.date) {
        dateArr = [this.$moment(this.searchOption.date[0]).format('YYYY-MM-DD'), this.$moment(this.searchOption.date[1]).format('YYYY-MM-DD')]
      }
      this.$api.post('/data/trendData', { type: value, date: dateArr.length > 0 ? dateArr.join(',') : '' }, r => {
        console.log('打印趋势数据----', r)
        setTimeout(() => {
          this.loading1 = false
        }, 300)
        if (r.flag) {
          this.chartData.rows = r.data
        }
      })
    },
    getRankData() {
      this.$api.get('/data/rankData', {}, r => {
        console.log('打印排名数据----', r)
        if (r.flag) {
          this.chartData1.rows = r.data
        }
      })
    },
    getPieData() {
      this.$api.get('/data/pieData', {}, r => {
        console.log('打印饼图统计数据----', r)
        if (r.flag) {
          this.chartData4.rows = r.data
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  .tl2 {
    background: white;
    margin-top: 20px;
    .top {
      padding: 0px 15px 10px 15px;
      position: relative;
      .search {
        position: absolute;
        top: 15px;
        right: 10px;
      }
      @media screen and (max-width: 768px) {
        .search {
          top: 75px;
          left: 15px;
        }
      }
    }
    .charts {
      .v-style {
        width: 68% !important;
        padding-left: 15px;
        margin-right: 20px;
        height: 360px;
      }
      .v-ranking {
        width: 25%;
        padding-right: 15px;
      }
      @media screen and (max-width: 768px) {
        .v-style {
          width: 100% !important;
        }
        .v-ranking {
          width: 90%;
          margin: 0 auto;
        }
      }
    }
  }
  .tl3{
      background: white;
      margin-top: 40px;
  }
  .tl4{
      margin-top: 35px;
      .left{
          width: 49%;
          background: white;
      }
      .right{
          width: 49%;
          background: white;
      }
       @media screen and (max-width: 768px) {
        .left {
          width: 100% !important;
        }
        .right {
          width: 100% !important;
        }
      }
  }
  .tl5{
    width: 100%;
    margin-top: 35px;
    display: flex;
    justify-content: space-between;
    .gift{
      width: 49%;
      background: white;
      .cnt{
        margin:0 20px;
        background: #fffaee;
        color: #faa658;
        padding: 20px;
        font-size: 13px;
      }
    }
    .time-view{
      width: 49%;
      background: white;
    }
  }
  .warn{
      width: 100%;
      text-align: center;
      color: #f5222d;
      margin-top: 35px;
      margin-bottom: 35px;
      span{
          color: rgba(0,0,0,.45);
      }
  }
}
</style>
